<template>
	<view class="container" :style="{'background-size': 'contain'}">
		<!-- `url(${pageBg})` -->
		<top-navigation isShow isFix backIconColor='#FFF' isBack :custom='true' :customNum='100'>
			<template #center-slot>
				<view class="paihang">
					<x-card fontWeight="800" background="#FFF" padd="10rpx" border="none">祭奠</x-card>
				</view>
			</template>
		</top-navigation>
		
		<view class="info justify-start flex-wrap">
			<view class="justify-around" style="color: #000;">
				<view class="bgfff align-center r-20 pl-20">
					<input type="text" placeholder="输入姓名查找" v-model="name" />
					<x-btn>搜索</x-btn>
				</view>
				<x-card @tap="goCreated" fontWeight="800" background="#FFF" padd="10rpx" border="none	">创建一个祭奠</x-card>
			</view>
			<view class="box justify-center align-center" v-for="(v,k) in 4" :key="k" v-if="false">
				<view class="box-item">
					<view class="tombstone">
						<image :src="`/grave/static/${4 - k}.jpeg`" mode="widthFix"></image>
						<view class="tomb" 
						@touchstart="touchstart"
						@touchmove="touchmove"
						@touchend="touchend"
						
						>
							张三 之墓
						</view>
					</view>
					<view class="justify-between p-20">
						<view class="">
							张三
						</view>
						<view class="">
							祭奠:0
						</view>
					</view>
					<view class="p0-20">
						生平简介:'这是个好人'
					</view>
					<view class="justify-between p-20">
						<view class="">
							访问:0
						</view>
						<view class="">
							留言:0
						</view>
					</view>
				</view>
			</view>

		</view>
		<pokerModal v-if="pokerShow" @close='pokerShow=false'></pokerModal>
		<!-- <bsRule v-if="ruleShow" @close="ruleShow=!ruleShow"></bsRule> -->
		<bs-particles v-if="canvasShow" :particlestyle="particlestyle"></bs-particles>
	</view>
</template>
<script module="kuang" lang="wxs">
	function getStar(k) {

	}
	module.exports = {
		msg: '我是wxs',
		getStar: getStar,
		// touchmove: touchmove
	}
</script>
<script setup>
	// import bsRule from '../rule/rule.vue'
	import pokerModal from '../com/pokerModal.vue'
	import colorBg from '../com/colorBg.vue'
	const db = uniCloud.database();
	const crystalList = ref('1')
	const getList = async () => {
		uni.showLoading({
			title: '加载中'
		})
		const res = await db.collection('bs-notice').limit(10)
			.orderBy('score', 'desc') // 按照score字段降序排序
			.get()
		crystalList.value = res.result.data[0].pass
		uni.hideLoading()
	}


	import {
		ref,
		reactive,
		onMounted,
		onUnmounted,
		getCurrentInstance,
		onBeforeUnmount
	} from 'vue'
	const ALIOSSURL = 'https://baishuang.oss-cn-beijing.aliyuncs.com/audio/'
	const ALIOSSURLY = 'https://baishuang.oss-cn-beijing.aliyuncs.com/m4audio/'
	onMounted(() => {
		setTimeout(() => {
			canvasShow.value = true
		})

	})
	const canvasShow = ref(false)
	const name = ref('')
	const pokerShow = ref(false)
	const ruleShow = ref(false)
	// 将角度转换为弧度
	function deg2rad(deg) {
		return deg * (Math.PI / 180);
	}

	// 计算两个经纬度之间的大圆距离（单位：千米）
	function distanceBetweenPoints(lat1, lon1, lat2, lon2) {
		const R = 6371; // 地球半径，单位：千米
		const dLat = deg2rad(lat2 - lat1);
		const dLon = deg2rad(lon2 - lon1);
		const a =
			Math.sin(dLat / 2) * Math.sin(dLat / 2) +
			Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
			Math.sin(dLon / 2) * Math.sin(dLon / 2);
		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
		const distance = R * c; // 结果单位：千米
		return distance;
	}

	// 示例用法
	const distanceInKm = distanceBetweenPoints(40.050599, 116.617435, 30.578282, 103.960388);
	console.log(
		"两点之间的距离（千米）：" + distanceInKm);


	// const getRanking = getRanking


	// 人数
	const numberOfPeople = ref(2)
	const handleClick = (k) => {
		if (k == 1) {
			numberOfPeople.value++
		} else if (numberOfPeople.value - 1 >= 2) {
			numberOfPeople.value--
		} else {
			uni.showToast({
				title: '人数不能少于2人',
				icon: 'none'
			})
		}

	}
	const goCreated = () => {
		uni.navigateTo({
			url: '/grave/rule/rule'
		})
	}
	const handlePlay = () => {
		uni.navigateTo({
			url: '/cardgame/play/play?peoplenum=' + numberOfPeople.value
		})
	}
	// 背景配置
	const particlestyle = ref({
		"style": "nasa",
		"zindex": -1,
		"bgcolor": "#000022"
	})
	// 初始游戏币
	const touchstart = (e) => {
		// 存数据库
		console.log('touchstart',e);
	}
	const touchmove = (e) => {
		// 存数据库
		console.log('touchmove',e);
	}
	const touchend = (e) => {
		// 存数据库
		console.log('touchend',e);
	}
</script>
<style lang="scss" scoped>
	@import '../com/com.css';

	.container {
		width: 100vw;
		min-height: 100vh;
	}

	.logo {
		width: 500rpx;
		height: 500rpx;
		border-radius: 50rpx;
		margin: 200rpx 0 50rpx;
	}

	.info {
		width: 100vw;

		.box {
			width: 750rpx;
			border-radius: 30rpx;
			overflow: hidden;

			.box-item {
				border: 1rpx solid #FFF;
				border-radius: 20rpx;
				width: 710rpx;
				height: calc(100% - 20rpx);
				background: #ffffff;
				overflow: hidden;

				image {
					width: 100%;
				}
				.tombstone{
					position: relative;
					.tomb{
						position: absolute;
						width: 40rpx;
						font-size: 40rpx;
						color: #000;
						font-weight: 800;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
				}
			}
		}

		.select-btn {
			width: 50vw;
			margin-top: 50rpx;
		}
	}
</style>